<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">前六次任务评价情况</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="pd-main">
            <div id="chart4" class="chart-1"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getText } from "./../common.js";

export default {
  name: "compareRecord",
  props: {
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    dictData: {
      type: Array,
      default() {
        return [];
      },
    },
    currentStudent: {
      type: Object,
      default() {
        return {};
      },
    }
  },
  data() {
    return {
      timer: null,
      number: null,
      arr: [],
      periodList: [],
      selectItem: "",
      num: 0,
      chartData: [],
      dataScore: []
    };
  },
  watch: {
    allData: {
      handler() {
        this.getData();
      },
      deep: true,
    },
    selectItem: {
      handler(val) {
        if (val) {
          const item = this.chartData.find((el) => el.period === val);
          this.arr = item.subjectName.map((el, key) => {
            return { subjectName: el, score: item.score[key] };
          });
          this.selectItem = item.period;
        }
      },
      deep: true,
    }, 
    currentStudent: {
      handler(val) {
        val && this.getData();
      },
      deep: true,
    },
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getData() {
      const tempData = this.allData.filter((el) => el.scoreType === "1" && el.stuName === this.currentStudent.stuName);
      // this.chartData = list;
      // if (list.length > 0) {
      //   this.arr = list[0].subjectName.map((el, key) => {
      //     return { subjectName: el, score: list[0].score[key] };
      //   });
      //   this.periodList = list.map((el) => el.period);
      //   this.selectItem = list[0].period;
      //   this.initData();
      // } else {
      //   this.arr = [];
      // }
      this.dataScore = tempData.map((el) => {
        const sObj = {
          score0: 0,
          score1: 0,
          score2: 0,
          score: 0,
        };
        const tempScore = el.score.split(";");
        tempScore.forEach((s, i) => {
          s.split(",").forEach((k) => {
            sObj[`score${i}`] += Number(k);
          });
        });
        const { score0, score1, score2 } = sObj;
        sObj.score = ((score0 + score1 + score2) / 1.5).toFixed(1);
        sObj.name = el.stuName
        sObj.period = el.period
        return sObj;
      }); 

      const taskName = []
      tempData.forEach(el => {
        if(!taskName.includes(el.period)) {
          taskName.push(el.period)
        }
      })

      this.initData()
    },
    initData() {
      this.number = this.number == this.arr.length ? 0 : this.number;
      this.timer = setTimeout(() => {
        this.number++;
        this.initData();
      }, 5000);
      this.getEchart();
    },
    getEchart() {
      // const getText = this.getText;
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById("chart4")); // 图标初始化
      const itemData = [
        { value: 0, name: "任务1" },
        { value: 0, name: "任务2" },
        { value: 0, name: "任务3" },
        { value: 0, name: "任务4" },
        { value: 0, name: "任务5" },
        { value: 0, name: "任务6" },
      ];

      itemData.forEach(el => {
        this.dataScore.forEach(item => {
          if (el.name === item.period ) {
            el.value = item.score
          }
        })
      })
      if (!this.dataScore.length) {
        myChart.dispose();
        return;
      }
      const option = {
        grid: {
          top: "6%",
        },
        tooltip: { 
          trigger: "item",
          formatter: function (data) {
            let message = data.name + "<br/>";
            const value = data.value;
            return `${message}${value}(${getText(value)})`;
          },
        },
        title: {
          text: "",
          subtext: "",
          left: "center",
        }, 
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 16,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: '70%', 
            label: {
             formatter: params => {
              return `${params.name}-${params.value}-(${getText(params.value)})`
            },
           }, 
            center: ['50%', '40%'],
            data: itemData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.sn-container {
  width: 905px;
  left: 24px;
  top: 1235px;

  .pd-main {
    position: absolute;
    height: 100%;
    width: 100%;

    [class^="chart"] {
      position: absolute;
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;
    }

    .chart-1 {
      width: 100%;
      height: 450px;
      top: 55%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  }
}

.select {
  position: absolute;
  right: 0;
}
</style>
